<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        label, select, input[type="text"] {
            display: block;
            margin-bottom: 10px;
        }
        label {
            margin-top: 20px;
        }
        button {
            margin-top: 20px;
        }
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>{{ title }}</h1>
        {% if instructions %}
           <div class="instructions"><p>{{ instructions|safe }}</p></div>
        {% endif %}
        <form action="" method="post">
            {% for question in questions %}
                <div>
                    <label for="{{ question.id }}">{{ question.text }}</label>
                    {% if question.type == "text" %}
                        <input type="text" id="{{ question.id }}" name="{{ question.id }}" aria-label="{{ question.text }}" required>
                    {% elif question.type == "select" %}
                        <select id="{{ question.id }}" name="{{ question.id }}" aria-label="{{ question.text }}" required>
                            <option value="" disabled selected hidden>Bitte auswählen</option>
                            {% for option in question.options %}
                                <option value="{{ option.score }}">{{ option.text }}</option>
                            {% endfor %}
                        </select>
                    {% endif %}
                </div>
            {% endfor %}
            <button type="submit">Abschicken</button>
        </form>
    </div>
</body>
</html>
